<template>
    <div>
        <a-table :data-source="dataSource" :pagination="pagination" :columns="columns">
            <template #bodyCell="{ text, column,record }">
                <template v-if="column.dataIndex==='image'">
                    <a @click="showImage(text)">查看图片</a>
                    <a-modal style="text-align: center;" @cancel="hideImage" :footer="null"
                             :visible="modalVisible">
                        <img style="width: 100%;"
                             :src="imagePath"
                             alt="暂无图片"/>
                    </a-modal>
                </template>
                <template v-if="column.dataIndex === 'detail'">
                    <a-popover v-if="text!==''" title="退款理由" trigger="click">
                        <template #content>
                            <p>{{text}}</p>
                        </template>
                        <unordered-list-outlined/>
                    </a-popover>
                    <span v-else>{{text}}</span>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                    <a-popover title="提示">
                        <template #content>
                            <div style="margin-left: 20px;margin-bottom: 20px">请确认是否退款</div>
                            <div style="display: flex;flex-direction: row;justify-content: space-between">
                                <a-button>取消</a-button>
                                <a-button @click="confirmRefund(record)" type="primary">确认</a-button>
                            </div>
                        </template>
                        <strikethrough-outlined/>
                    </a-popover>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";
    import {message} from 'ant-design-vue';

    export default {
        name: "RefundOrderPage",
        data() {
            return {
                columns: [
                    {
                        title: "退款编号",
                        dataIndex: "id",
                        key: "id",
                    },
                    {
                        title: "顾客编号",
                        dataIndex: "customerId",
                        key: "customerId",
                    },
                    {
                        title: "订单编号",
                        dataIndex: "orderId",
                        key: "orderId",
                    },
                    {
                        title: "退款金额",
                        dataIndex: "refundAmount",
                        key: "refundAmount",
                    },
                    {
                        title: "退款类型",
                        dataIndex: "refundType",
                        key: "refundType",
                    },
                    {
                        title: "顾客截图",
                        dataIndex: 'image',
                        key: "image",
                    },
                    {
                        title: "创建时间",
                        dataIndex: 'createdTime',
                        key: "createdTime",
                    },
                    {
                        title: "更新时间",
                        dataIndex: 'updateTime',
                        key: "updateTime",
                    },
                    {
                        title: '退款理由',
                        dataIndex: 'detail',
                        key: "detail",
                    },
                    {
                        title: "退款",
                        dataIndex: 'operation',
                        key: "operation",
                    },

                ],
                pagination: {
                    size: "small",
                    showSizeChanger: true,
                    showQuickJumper: true
                },
                totalCount: 0,
                dataSource: [],
                state: {
                    searchText: '',
                    searchedColumn: '',
                },
                modalVisible: false,
                imagePath: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            }
        },
        mounted() {
            this.getRefundOrderList();
        },
        methods: {
            getRefundOrderList() {
                request({
                    url: api.GET_ALL_REFUND_ORDERS,
                    method: "GET",
                }).then(res => {
                    this.dataSource = res;
                    this.totalCount = res.length;
                })
            },
            showImage(imagePath) {
                this.imagePath = imagePath;
                this.modalVisible = true
            },
            hideImage() {
                this.modalVisible = false
            },
            confirmRefund(item) {
                request({
                    url: api.CONFIRM_REFUND,
                    data: item,
                    method: "POST",
                    pureData: false,
                }).then(res => {
                    if (res.code === 200) {
                        message.success(res.message)
                    } else {
                        message.error(res.message);
                    }
                    this.getRefundOrderList();
                });
            }
        }
    }
</script>

<style scoped>

</style>